      <!DDOCTYPE html>
<html>
    <head>
     <meta charset="utf-8" />
     <title>Starry网</title>
	 <style type="text/css">
		 #x{                       /*id选择器*/
			 font-family: 黑体;     /*字体类型*/
			 font-size:42px ;      /*字体大小*/
			 font-weight: 700;     /*字体粗细*/
			 font-style: italic;   /*字体风格*/
			 color: darkslateblue; /*字体颜色*/
		   }
		#wb1{
			text-indent: 8; /*首行缩进8*/
		    }
		#wb2{
			text-align: right; /*句子向右对齐*/
		    }
		#wb3{
			text-decoration: line-through; /*文字修饰加中划线*/
		    }
		#wb4{
			text-transform: capitalize; /*将英文句子中每个单词首字母转换为大写*/
		    }
		#wb5{
			line-height: 2; /*一行文本的高度为2格*/
		    }
		#wb6{
			letter-spacing: 4; /*字与字之间的间隙为5格*/
		    }
		#kj1
		{
			border-width:1px ;  /*边框的宽度为1px*/
			border-style: solid;/*边框为实线*/
			border-color: black;/*边框颜色为黑色*/
		}
		#kj2
		{
			border: 1px solid black;/*简写样式*/
		}
		#bg1
		{
			border: 1px solid black;
		}
		#yangshi1
		{
			width: 100;
			height: 40;
			background-color: aquamarine;
			cursor: pointer;
		}
		#yangshi2
		{
			width: 100;
			height: 40;
			background-color: aquamarine;
			cursor: text;
		}
		#yangshi3
		{
			width: 100;
			height: 40;
			background-color: aquamarine;
			cursor: crosshair;
		}
		#yangshi4
		{
			width: 100;
			height: 40;
			background-color: aquamarine;
			cursor: wait;
		}
		#yangshi5
		{
			width: 100;
			height: 40;
			background-color: aquamarine;
			cursor: help;
		}
		#yangshi6
		{
			width: 100;
			height: 40;
			background-color: aquamarine;
			cursor: move;
		}
		#yangshi7
		{
			width: 100;
			height: 40;
			background-color: aquamarine;
			cursor: e-resize;
		}
		
		 
	 </style>
    </head>
    <body>
    <h1 align="center" style="color:red">DLW_STARRY的测试网站</h1>
	<p>物品图片.jpg</p>
    <p>非常的好东西，你绝对喜欢</p>
    <p>物品价格:<s>99元</s><b>9.9元</b></p>
	<h2 align="right" ><a href="zzwz/别人的学习笔记.html" >学习笔记</a></h2>
    <hr/>
	<div >
    <h2 style="color:red">物品榜单</h2>
    <ol>
     <li>索尼相机</li>
     <li>佳能相机</li>
     <li>i913900HK</li>
     <li>RTX4090</li>
    </ol>
    <p>全场只要九块九，全场只要<b style="color:red">9.9元</b></p>
    <select>
      <option>Phigros</option>
      <option>COD</option>
      <option>RED</option>
    </select>
    <a href="https://www.bilibili.com">点击这里跳转BiliBili查看详情 &trade;</a>
    <img src="zzwz/1.png" alt="xhczxhj" windth="200" height="200" title="hhh" alt="eee"/>
    </div>
	<hr/>
	
    <form method="post" align="center">
		<h1 align="left">美观的</h1>
        <table align="center">
        	<thead>
				<caption>自制网站的注册账号&mdash;&mdash;&mdash;&mdash;</caption>
        		<tr><td>昵称：</td>
        			<td><input type="text" placeholder="请填写您的昵称"/></td>
        			
        		</tr>
        	</thead>
        	<tbody>
        		<tr><td>邮箱：</td>
        			<td><input type="text" placeholder="请填写您的邮箱地址"/>	
					<select>
						<option>@qq.com</option>
						<option>@163.com</option>
						<option>@126.com</option>
						<option>@gmil.com</option>
					</select></td>	
        		</tr>
        	</tbody>
        	<tfoot>
        		<tr><td>手机号：</td>
        			<td><input type="text" maxlength="11/" placeholder="请填写您的手机号"/>
					</td>
        			
        		</tr>
        		<tr>
        			<td>验证码：</td>
        			<td><input type="text" placeholder="请输入验证码">
					<a href="zzwz/tiaozhuan.html">点击获取验证码</a></td>
        		</tr>
				<tr>
        			<td>密码：</td>
        			<td><input type="password" placeholder="填写密码"></td>
        		</tr>
        	</tfoot>
        </table>
		性别：
		<input type="radio"  name="xingbie" value="男" />男</label>
		<input type="radio"  name="xingbie" value="女" />女</label>
		<input type="radio"  name="xingbie" value="性别不详" />性别不详</label><br />
		兴趣：
		<input type="checkbox"  name="xingqu" value="bilibili" />bilibili
		<input type="checkbox"  name="xingqu" value="ACfan" />ACfan
		<input type="checkbox"  name="xingqu" value="niconico" />niconico
		<input type="checkbox"  name="xingqu" value="YouTube" />YouTube
		<input type="checkbox"  name="xingqu" value="摄影" />摄影
		<input type="checkbox"  name="xingqu" value="编程" />编程
		<input type="checkbox"  name="xingqu" value="动画制作" />动画制作<br />
		<textarea rows="7" cols="25" value="请输入你自己的简单的介绍~">请输入你自己的简单的介绍~</textarea><br />
		<input type="reset" value="重置" />
		<input type="button" value="确定" /><br />
		
		<hr>
		<h1 align="left">不美观的</h1>
		昵称：<input type="text" /><br />
        手机号:<input type="text" maxlength="11/">
        <a href="zzwz/tiaozhuan.html">点击获取验证码</a><br />
        邮箱：<input type="text" />           
	<select>
      <option>@qq.com</option>
      <option>@163.com</option>
      <option>@126.com</option>
      <option>@gmil.com</option>
    </select><br />
    密码：<input type="password" /><br />
    性别：
    <input type="radio"  name="xingbie" value="男" />男</label>
    <input type="radio"  name="xingbie" value="女" />女</label>
    <input type="radio"  name="xingbie" value="性别不详" />性别不详</label><br />
    兴趣：
    <input type="checkbox"  name="xingqu" value="bilibili" />bilibili
    <input type="checkbox"  name="xingqu" value="ACfan" />ACfan
    <input type="checkbox"  name="xingqu" value="niconico" />niconico
    <input type="checkbox"  name="xingqu" value="YouTube" />YouTube
    <input type="checkbox"  name="xingqu" value="摄影" />摄影
    <input type="checkbox"  name="xingqu" value="编程" />编程
    <input type="checkbox"  name="xingqu" value="动画制作" />动画制作<br />
    <textarea rows="7" cols="25" value="请输入你自己的简单的介绍~">请输入你自己的简单的介绍~</textarea><br />
    <input type="reset" value="重置" />
    <input type="button" value="确定" /><br />
    </form>
	<hr>
	
	<h1>框架超链接</h1>
	<div align="center">	
	 <iframe src="https://www.bilibili.com" width="720" height="480"></iframe>
	</div>
	<hr>
	
	<table align="center">
		<h1>表格练习</h1>
		<caption>个人信息</caption>
		<thead>
			<tr><td>姓名</td>
				<td><input type="text" placeholder="请填写您的姓名"/></td>
				
			</tr>
		</thead>
		<tbody>
			<tr><td>身份证号</td>
				<td><input type="text" placeholder="请填写您的身份证号"/></td>
				
			</tr>
		</tbody>
		<tfoot>
			<tr><td>家庭住址</td>
				<td><input type="text" placeholder="请填写您的家庭住址"/></td>
				
			</tr>
			<tr>
				<td>学校</td>
				<td><input type="text" placeholder="比如菏泽建设中学"></td>
			</tr>
			<tr>
				<td>xing</td>
				<td><input type="text"></td>
			</tr>
		</tfoot>
	</table>
	<hr>
	
	<h1>音频标签</h1>
	<div align="center">
	<h2>白色幸福:</h2>
	<audio src="zzwz/白色幸福.mp3" controls ></audio>
    </div>
	<hr>
	
	<h1>视频标签</h1>
	<div align="center" >
		<h2>1 【R-18G】LeaF - 命日 Meinichi</h2>
		<video src="zzwz/1 【R-18G】LeaF - 命日 Meinichi.mp4" controls width="720" height="480"></video>
	</div>
	<hr>
	
	<h1>HTML表格练习</h1>
	<div>
		<table border="1" align="center" bgcolor="FFFFF1" cellpadding="0" cellspacing="0">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>小明</td>
				<td>16</td>
				<td>男</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>16</td>
				<td>女</td>
			</tr>
			<tr>
				<td>小刚</td>
				<td>16</td>
				<td>男</td>
			</tr>
		</table>
	</div>
	<hr />
	
	<h1>CSS表格练习</h1>
	<div>
		<table id="bg1">
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>性别</td>
			</tr>
			<tr>
				<td>小明</td>
				<td>16</td>
				<td>男</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>16</td>
				<td>女</td>
			</tr>
			<tr>
				<td>小刚</td>
				<td>16</td>
				<td>男</td>
			</tr>
		</table>
	</div>
	<hr />
	
	<h1>CSS字体样式测试</h1>
	<div align="center">
		<p id="x">这是测试文字</p> 
	                               <!--CSS代码查看7~13行
	                               原CSS代码为：
								    <style type="text/css">
	                                    #x{                       /*id选择器*/
				                            font-family: 微软雅黑; /*字体类型*/
				                            font-size:42px ;      /*字体大小*/
				                            font-weight: 700;     /*字体粗细*/
				                            font-style: italic;   /*字体风格*/
				                            color: darkslateblue; /*字体颜色*/
	                                      }    
									 </style>
									 ......
	                                -->
	</div>
	<hr>
	
	<h1>CSS文本样式测试</h1>
	<div >
		<p id="wb1"> <!--首行缩进8-->
			1、<b>(首行缩进8)</b>测试句子:CPU出现于大规模集成电路时代，处理器架构设计的迭代更新以及集成电路工艺的不断提升促使其不断发展完善。
		</p>
		<p id="wb2"> <!--句子向右对齐-->
			2、<b>(句子向右对齐)</b>测试句子:CPU出现于大规模集成电路时代，处理器架构设计的迭代更新以及集成电路工艺的不断提升促使其不断发展完善。
		</p>
		<p id="wb3"> <!--文字修饰加中划线-->
			3、<b>(文字修饰加中划线)</b>测试句子:CPU出现于大规模集成电路时代，处理器架构设计的迭代更新以及集成电路工艺的不断提升促使其不断发展完善。
		</p>
		<p id="wb4"> <!--将英文句子中每个单词首字母转换为大写-->
			4、<b>(将英文句子中每个单词首字母转换为大写)</b>Test sentence: CPU appeared in the era of large-scale integrated circuits, and the iterative update of processor architecture design and the continuous improvement of integrated circuit technology promoted its continuous development and improvement.
		</p>
		<p id="wb5"> <!--一行文本的高度为2格-->
			5、<b>(一行文本的高度为2格)</b>测试句子:CPU出现于大规模集成电路时代，处理器架构设计的迭代更新以及集成电路工艺的不断提升促使其不断发展完善。
		</p>
		<p id="wb6"> <!--字与字之间的间隙为5格-->
			6、<b>(字与字之间的间隙为5格)</b>测试句子:CPU出现于大规模集成电路时代，处理器架构设计的迭代更新以及集成电路工艺的不断提升促使其不断发展完善。
		</p>
	</div>
	<hr>
		<h1>CSS边框样式测试</h1>
	<div id="kj1">边框</div>
	<br />
	<div id="kj2">边框(CSS代码简写)</div>
	<hr />
	
	<div>
		<a href="E:\ \课堂练习\课堂作业\zy2\我的\表格作业.html">表格作业</a>
	</div>
	<hr />
	
	<h1>CSS鼠标样式</h1>
	<div id="yangshi1" >测试区域</div><br />
	<div id="yangshi2" >测试区域</div><br />
	<div id="yangshi3" >测试区域</div><br />
	<div id="yangshi4" >测试区域</div><br />
	<div id="yangshi5" >测试区域</div><br />
	<div id="yangshi6" >测试区域</div><br />
	<div id="yangshi7" >测试区域</div><br />
	<br />
	
	<p>dsvnbsdividsnb<span></span>dsgrdffdg</p>
	</body>
</html>
